import React from 'react';
import { 
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ScrollView,
  DeviceEventEmitter
} from 'react-native';
import { withNavigationFocus } from "react-navigation";
import FontIcon from 'react-native-vector-icons/FontAwesome'; 
import Swiper from 'react-native-swiper';
import Modal from "react-native-modal";
import IconIonicons  from 'react-native-vector-icons/Ionicons'; 

import HomeCard from '../components/HomeCard';
import Layout from '../constants/Layout';
import { inject, observer } from 'mobx-react';

@inject((stores) => {
    return {
	  homeStore: stores.rootStore.homeStore,
	  hatchStore: stores.rootStore.hatchStore,
      loginStore: stores.rootStore.loginStore,
	  inviteStore: stores.rootStore.inviteStore
    }
  })
@observer 
class HomeScreen extends React.Component {
	static navigationOptions = {
		header: null,
        headerBackTitle: '返回',
        
	};
	constructor(props){
		super(props);
		this.subscription = null;
		this.state = {
			// showRecharge: false,
			showSwiper: false,
			currentItem: {},
			data:null,
			subscription:null,
			showAboutModal: false,
			getNoticeSuccess: false,
			hasLoad: false
		}
	}
	componentDidUpdate(prevProps) {
		if (prevProps.isFocused !== this.props.isFocused && this.props.isFocused) {
		  // Use the `this.props.isFocused` boolean
		  // Call any action
		  //重新获得焦点
		  this._getData();
		}
	}
	componentDidMount() {
		this._getData();
		this.subscription = DeviceEventEmitter.addListener('Home', this.refreshData)
	}
	refreshData = () => {
		this._getData();
	}
	componentWillUnmount(){
        DeviceEventEmitter.emit('Hatch', {id: 1});
	}
	/**
	 * 获取数据
	 */
	_getData = () => {
		storage.load({ key: 'token' }).then((ret) => {
			if (ret) {
				this.props.homeStore.getNssAccount()
				this.props.homeStore.getCoinData();
				this.props.hatchStore.getHatchStatisticsData();
				this.props.inviteStore.getInviteStatisticsData();
				this.props.homeStore.getNotice(()=>{
					this.setState({
						getNoticeSuccess: true
					})
				});
			}else{
				this.props.navigation.navigate('Login')
			}
		}).catch(() => {
			this.props.navigation.navigate('Login')
		});
		this.setState({
			hasLoad: true
		})
	}
	
	componentWillUnmount() { 
		this.subscription.remove();
	};
	/**
	 * 点击充值按钮
	 */
	_onRechargePress = () =>{
		this.props.navigation.navigate('Recharge')
	}
	/**
	//  * 关闭按钮点击
	//  */
	// _onClosePress = ()=>{
	// 	this.setState({
	// 		showRecharge: false
	// 	})
	// }
	/**
	 * 充值记录
	 */
	_goTake = () => {
		this.props.navigation.navigate('Take');
		
	}
	/**
	 * 抽奖
	 */
	_goLuck = () => {
		this.props.navigation.navigate('Luck');
	}
	/**
	 * 点击公告
	 */
	_swiperPress = (item) => {
		this.setState({
			showSwiper: true,
			currentItem: item
		})
	}
	/**
	 * 获取通知栏
	 */
	_getSwiper = () => {
		return <Swiper
					style={styles.swiper}
					horizontal={false}
					showsButtons={false}
					showsPagination={false}
					loop={true}
					autoplay={true}
				>
				{
					this.props.homeStore.notice.map((item,index)=>{
						return (
								<TouchableOpacity key={index + ''} style={styles.swiperItem} onPress={()=>{this._swiperPress(item)}}>
									<View key={item.id + ''}>
											<Text style={styles.swiperTxt}>{item.title}</Text>
									</View>	
								</TouchableOpacity>
						)
					})
				}
				</Swiper>
	}
	render() {
		return (
			<View style={styles.container}>
				<View style={styles.header}>
					<View style={styles.total}>
						<Text style={styles.totalMoney}>{this.props.homeStore.getAccount()}</Text>
						<Text style={styles.totalTit}>NSS可用余额</Text>
					</View> 
					<View style={styles.headerControl}>
						<TouchableOpacity onPress={this._onRechargePress} style={styles.controlItem}>
							<FontIcon name='qrcode' style={styles.controlIcon}></FontIcon>
							<Text style={styles.controlTxt}>充值</Text> 
						</TouchableOpacity>
						<TouchableOpacity onPress={this._goTake} style={styles.controlItem}> 
							<FontIcon name='qrcode' style={styles.controlIcon}></FontIcon>
							<Text style={styles.controlTxt}>提币</Text>
						</TouchableOpacity>
					</View>
				</View>
				<View style={styles.swiperBox}>
					<FontIcon name='volume-up' style={styles.swiperIcon} />
					{
						this.state.getNoticeSuccess ? this._getSwiper() : null
					}
				</View>
				<ScrollView contentContainerStyle={styles.resBox}>
					<View style={styles.resContinaer}>
						<HomeCard navigate={this.props.navigation.navigate} data={this.props.hatchStore.hatchStatistics}/> 
						<HomeCard navigate={this.props.navigation.navigate} data={this.props.inviteStore.inviteStatistics}/> 	
						<View style={styles.luckMain}>
							<View style={styles.luckMt}>
								<Text style={styles.luckC1}>今日充值超2000会有一次机会抽取</Text>
							</View>
							<View style={styles.luckMt}>
								<TouchableOpacity onPress={this._goLuck}>
									<Text style={styles.luckC2}>去抢糖果</Text>
								</TouchableOpacity>
							</View>
						</View>
					</View>
				</ScrollView>
				<Modal isVisible={this.state.showSwiper}>
                    <View style={styles.modalContainer}>
                        <View style={styles.closeBox}>
                            <TouchableOpacity onPress={()=>this.setState({
                                showSwiper: false
                            })}>
                                <IconIonicons name='ios-close' style={styles.modalClose}></IconIonicons>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.modalMain}>
                           	<Text style={styles.modalTit}>{this.state.currentItem.title}</Text>
							<Text style={styles.modalContent}>&nbsp;&nbsp;&nbsp;&nbsp;{this.state.currentItem.content} </Text>
							<Text style={styles.modalTime}>{this.state.currentItem.addtime}</Text>
                        </View>
                    </View>
                </Modal>
			</View>
		);
	}
}
const styles = StyleSheet.create({
	container:{
		flex: 3,
		display: 'flex',
		justifyContent:'space-between',
		flexDirection:'column',
        // paddingTop: 36,
		width: Layout.window.width,
		height:Layout.window.height
	},
	header:{
		backgroundColor:'#FF7F4B',
		height:210,
		textAlign:'center',
	},
	total:{
		display:'flex',
		width:'100%',
		textAlign:'center',
		justifyContent:'center',
		alignItems:'center',
		height: 166
	},
	totalMoney:{
		color:'#ffffff',
		fontSize:36,
	},
	totalTit:{
		fontSize:18,
		lineHeight:26,
		color:'#ffffff'
	},
	headerControl:{
		height: 44,
		lineHeight:44,
		fontSize: 18,
		color:'#ffffff',
		flexDirection:'row',
		justifyContent:'space-between'
	},
	controlItem:{
		width:'49.9%',
		display:'flex',
		alignItems:'center',
		justifyContent:'center',
		flexDirection:'row',
		backgroundColor:'rgba(255,255,255,0.5)',
	},
	controlTxt:{
		color:'#ffffff'
	},
	controlIcon:{
		color:'#ffffff',
		fontSize:18,
		marginRight:10
	},
	swiperBox:{
		height:35,
		backgroundColor:'#FEFCED',
		marginTop:10, 
		paddingLeft:10,
		display:'flex',
		justifyContent:'space-between',
		flexDirection:'row',
		alignItems:'center'
	},
	swiperItem:{
		flex: 1,
		alignItems: 'flex-start',
		height:35
	},
	swiperRight:{
		marginRight: 10
	},
	swiper:{
		marginLeft: 10

	},
	swiperIcon:{
		fontSize:16,
		color:'#FF743D'
	},
	swiperTxt:{
		color:'#FF743D',
		width:'100%',
		textAlign:'left',
		fontSize:14,
		height: 35,
		lineHeight: 35
	},
	resBox:{
		// flex:1,
		marginTop: 10
	},
	resContinaer:{
		height: 300
	},	
	luckMain:{
		marginTop: 10,
		display:'flex',
		paddingBottom: 20,
		height: 80
	},
	luckC1:{
		fontSize: 14,
		color: '#B9B6B6',
		textAlign: 'center'
	},
	luckC2:{
		fontSize: 14,
		color:'#FF7F00',
		textAlign: 'center'
	},
	luckMt:{
		marginTop: 10
	},
	modalContainer:{ 
        backgroundColor: 'rgba(232, 229, 229,0.8)',
        padding: 10,
        borderRadius: 8,
        paddingBottom: 20
    },
    closeBox:{
        display:'flex',
        justifyContent:'flex-end',
        alignItems:'flex-end'
    },
    modalClose:{
        color:'#ffffff',
        fontSize:30
	},
	modalMain:{
		padding: 10
	},
	modalContent:{
		marginTop: 20,
		marginBottom: 20,
	},
    text:{
        marginTop: 10,
        color:'#101010'
    },
	modalTime:{
		textAlign:'right'
	}
});
export default withNavigationFocus(HomeScreen);